{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/picker.css"/>
<link rel="stylesheet" href="__STATIC__/mobile/default/css/wallet.css"/>
{/block}
{block name="pageType"}balanceDetail{/block}
{block name="main" }
<div class="top">
    <div class="dataBox">
        <div class="left">
            <input type="text" class="fs28 fw_b color_3" readonly value="" id="nowValue"/>
            <!-- <span class="fs24 color_9">余额收入：￥<em class="b_income">0</em> 余额支出：￥<em class="b_expend">0</em></span> -->
            <!-- <span class="fs24 color_9">星券收入：<em class="i_income">0</em> 星券支出：<em class="i_expend">0</em></span> -->
            <span class="fs24 color_9">佣金收入：<em class="y_income">0</em> 佣金支出：<em class="y_expend">0</em></span>
        </div>
        <img src="__STATIC__/mobile/default/images/detail01.png" alt="">
    </div>
    <div class="title">
        <span class="fs26 color_6">佣金记录</span>
        <div><img src="__STATIC__/mobile/default/images/goodslist05.png" alt="" data-type="0" class="typeimg"></div>

    </div>
</div>
<div class="page-bd">
    <!-- 页面内容-->
    <div class="list">
        
    </div>
</div>
<div class="model">
    <div class="modelBg"></div>
    <div class="modelbd">
        <!-- <label for="s11">
            <span class="fs28 color_3 fw_b">余额记录</span>
            <div class="iconBox">
                <input type="radio" class="check" value="balance_money" name="radiobox" id="s11" >
                <i class="icon_checked"></i>
            </div>
        </label> -->
       <!-- <label for="s12">
           <span class="fs28 color_3 fw_b">星券记录</span>
           <div class="iconBox">
               <input type="radio" class="check" value="use_integral" name="radiobox" id="s12">
               <i class="icon_checked"></i>
           </div>
       </label> -->

       <label for="s14">
        <span class="fs28 color_3 fw_b">佣金记录</span>
        <div class="iconBox">
            <input type="radio" class="check" value="total_dividend" name="radiobox" id="s14" checked>
            <i class="icon_checked"></i>
        </div>
       </label>
        <!-- <label for="s15">
            <span class="fs28 color_3 fw_b">充值消费</span>
            <div class="iconBox">
                <input type="radio" class="check" value="integral"  name="radiobox" id="s15">
                <i class="icon_checked"></i>
            </div>
        </label> -->
    </div>
</div>
{literal}
<script type="text/html" id="logTpl">
{{each list as item index}}
<div class="cell">
	<div class="left">
		<p class="fs28 fw_b color_2">{{item.change_desc}}</p>
		<span class="fs24 color_9">{{item._time}}</span>
	</div>
	<div class="right fs34 num {{item.value > 0 ? 'color_r' : 'color_3' }}">
		{{item.value}}
	</div>
</div>
{{/each}}
</script>
{/literal}
{/block}

{block name="footer"}
<script src="__STATIC__/mobile/default/js/datePicker.js"></script>
<script>
	function getList(){
		var arr = new Object;
		arr.time = $('#nowValue').val();
		arr.type = $("input[name='radiobox']:checked").val();
		jq_ajax('{:url("member/api.Users/getAccountLog")}',arr,function(res){
            if (res.code == 0){
                _alert(res.msg);
                return false;
            }
            if (typeof(res.list) == 'undefined'){
                $('.list').html('<div style="text-align:center; line-height: 100px;">暂无没有相关数据.</div>');
            }else{
                $('.list').html(template('logTpl', res));
            }
			$('#nowValue').val(res.time);
			$('.b_expend').html(res.b_expend);
			$('.b_income').html(res.b_income);
            $('.i_expend').html(res.i_expend);
            $('.i_income').html(res.i_income);

            $('.y_income').html(res.y_income);
            $('.y_expend').html(res.y_expend);
		});
	}
    $(function(){		
		getList();
        $('.dataBox img').on('click',function(){
            $('.model').hide()
            $('.typeimg').attr('data-type','0')
            $('.typeimg').css('transform','rotate(0deg)')
            demoClick()
        })
        //开启数据筛选
        $('.title div').on('click',function(){
            var imgBox=$('.typeimg')
            if (imgBox.attr('data-type')=='1') {
                $('.model').hide();
                imgBox.attr('data-type','0');
                imgBox.css('transform','rotate(0deg)');
            }else{
                $('.model').show();
                imgBox.attr('data-type','1');
                imgBox.css('transform','rotate(180deg)');
            }
			
        })
        $('.modelBg').on('click',function(){
            $('.model').hide()
        })

        $('.modelbd label').on('click',function(){
            if ($(this).find('input').is(':checked')) {
                var val=$(this).find('span').text()
                $('.title span').text(val)
				getList();
				$('.model').hide();
				let imgBox=$('.typeimg')
				imgBox.attr('data-type',0);
				imgBox.css('transform','rotate(0deg)');
            }
        })
    })

    // 日期选择器
    function demoClick() {
        var nowValue = document.getElementById('nowValue');
        var reg = new RegExp("年|月","g");
        var nowval=nowValue.value.replace(reg,"-").substring(0,7);
        new DatePicker({
            "type": '1',//0年, 1年月, 2月日, 3年月日
            "title": '请选择年月',//标题(可选)
            "maxYear": "2050",//最大年份（可选）
            "minYear": "2020",//最小年份（可选）
            "separator": "-",//分割符(可选)
            "defaultValue": nowval,//默认值（可选）
            "callBack": function (val) {
                //回调函数（val为选中的日期）
                var arr=val.split('-');
                val=arr[0]+'年'+arr[1]+'月'
                nowValue.value = val;
				getList();
            }
        });
    }
</script>

{/block}